<%@ include file="/WEB-INF/views/taglib.jsp" %>
 <c:url value="/user/search" var="paginationUrl"></c:url>
 <div>
 <h3 class="left">User Search</h3>
 <a href="<c:url value="/user/create" />" class="button right">
	 <img align="absmiddle" src="${imageUrl}/icon_add.png">Create User
</a>
 <a onclick="$('.searchCriteria').toggle();" class="button right">
	 <img align="absmiddle" src="${imageUrl}/icon_detail.png">Toggle Search Criteria
</a>
</div>
<div class="clear"></div>
 <form:form id="form" method="get" modelAttribute="searchCriteria" cssClass="simpleForm">
 <div class="searchCriteria">
 <fieldset>
 	<legend>Search Criteria</legend>
	<p>
	<form:label path="search['userName']" >
	User Name  
	</form:label> 
	<form:input path="search['userName']"/>
	</p>
	<p>
	<form:label path="search['userName']" >
	Person Name  
	</form:label> 
	<form:input path="search['personName']"/>
	</p>
	<p>
	<form:label path="search['nric']">
	NRIC  
	</form:label> 
	<form:input path="search['nric']"/>
	</p>
	<p>
	<form:label path="search['userType']">
	User Type  
	</form:label> 
	<form:select path="search['userType']">
  			<form:option value=""></form:option>
  			<form:options items="${globalUserTypeMap}" />	
	 </form:select>
	</p>
	<p>
	<form:label path="search['department.departmentId']">
	Department  
	</form:label> 
	<form:select id="departmentId" path="search['department.departmentId']">
			<form:option value=""></form:option>
			<form:options items="${globalDepartment}" itemValue="departmentId" itemLabel="departmentName" />
	 </form:select>   
	</p>
</fieldset>
<span class="right"> 
  	<button type="submit" class="button">Search</button>
</span>
 </div>
 </form:form>	
 <div class="clear"></div>
 <fieldset>
 	<legend>Search Result</legend>
 	<c:choose>
 		<c:when test="${searchResult.resultCount==0}">
 		<div class="notice">
 		<span class="ui-icon ui-icon-info left marginright5"></span>
 		No records </div>
 		</c:when>
 	<c:otherwise>
 	
<div id="result"></div>
<div><input type="button" id="file-uploader" value="Import" class="button positiveDark right" />	<input type="button" value="Export" id="export" class="button positiveDark right" /> 	<input type="button" class="button positiveDark right" value = "Template" onclick="window.open('<c:url value="/resources/sample/person.xls"></c:url>')"/></div>	
  	
 <table class="gridSearch">
 <thead>	
 	<tr>
 		<th>S/N</th>
 		<th>
 		<aims:sort columnName="userName" label="Username"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="personName" label="Person Name"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="nric" label="NRIC"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="userType" label="User Type"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="active" label="Active"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="systemUser.modifiedBy" label="Modified By"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="systemUser.dateModified" label="Modified Date"></aims:sort>
 		</th>
 	</tr>
 </thead>
 <tbody>
 	
 	<c:forEach items="${searchResult.result}" var="result" varStatus="status">
 	<tr <c:if test="${(status.count%2)==0 }">class="alt"</c:if>>
 		<td class="seqNo">${searchResult.recordNo+status.index}</td>
 		<td>
 		<c:url value="/user/update" var="editUrl"></c:url>
 		<a href="${editUrl}/${result.userName}">
 		${result.userName}</a>
 		</td>
 		<td>${result.personName}</td>
 		<td>${result.nric}</td>
 		<td>${globalUserTypeMap[result.userType]}</td>
 		<td>${globalActiveMap[result.active==false?"0":"1"]} ${globalActive}</td>
 		<td>${result.lastModifiedBy}</td>
 		<td>${result.lastModifiedDate}</td>
 		
 		</tr>
 	</c:forEach>
 	
 </tbody>
 <tfoot>
 	<tr><td colspan="10" align="right">
 		
 		<jsp:include page="/WEB-INF/views/pagination.jsp">
 			<jsp:param name="paginationUrl" value="${paginationUrl}" />
 		</jsp:include>
 	</td></tr>
 </tfoot>
 
 </table>		
 		</c:otherwise>
 	</c:choose>
  </fieldset>
	
<script type="text/javascript">
		$(document).ready(function() {
			$('.searchCriteria').hide();
		});
		
		$("#export").click(function(){
			window.location.href='<c:url value="/user/exportPerson" />';
		});
		
		new AjaxUpload('file-uploader', {
			  action: '<c:url value="/user/importPerson" />',
			  // File upload name
			  name: 'excelFile',
			  // Submit file after selection
			  autoSubmit: true,
			  responseType: 'json',
			  onSubmit: function(file, extension) {
				  if (! (/^(xls)$/i.test(extension))){
			            // extension is not allowed
			            alert('Error: only .xls allowed');
			            // cancel upload
			            return false;
			       }
				  document.body.style.cursor = 'wait';
				  $('#file-uploader').attr('disabled', true);
				  this.disable();
				  
			  },
			  onComplete: function(file, responseJSON) {
				  this.enable();
				  document.body.style.cursor = 'default';
				  if(responseJSON.result!='')
			      {
					  if(responseJSON.error=='false'){
						  $('#result').addClass('success');
					  }else{
						  $('#result').addClass('error');
					  }
					  $('#result').html(responseJSON.result);
			      }

			  }
			});
</script>